import React, { Component, Fragment } from 'react'

// import {
//   getBooksList,
//   getForbidBooksList,
//   getAllowBooksList,
//   getBooksDetail,
//   booksDo
// } from '../../../requests'
import { getAdminBooksList, adminbooks } from '../../../requests/bookDo'
import BookDetail from './BookDetail.js'
import { Card, Table, Spin, Button, Tag, message, Input, Popover } from 'antd'
import { antIcon } from '../../loading'
import './index.less'
const Search = Input.Search
const ButtonGroup = Button.Group

export default class BooksShow extends Component {
  constructor() {
    super()
    this.bookDetailModal = React.createRef()
    this.state = {
      //选中书籍集合
      selectedRowKeys: [],
      //每页显示数量
      perpage: 10,
      //偏移量
      offset: 10,
      //书籍总量
      total: 0,
      //每页书籍列表
      data: [],
      //缓存查看书籍详情id
      bookId: 0,
      isLoading: true,
      //当前页书籍审核状态
      booksCheck: 'pending'
    }

    //书籍列表头
    this.columns = [
      {
        title: '书名',
        dataIndex: 'bookName'
      },
      {
        title: '作者',
        dataIndex: 'author'
      },
      {
        title: '版本',
        dataIndex: 'bookVersion'
      },
      {
        title: '出版社',
        dataIndex: 'bookPress'
      },
      {
        title: '收藏次数',
        dataIndex: 'collectNum'
      },
      {
        title: '借阅次数',
        dataIndex: 'borrowNum'
      },
      {
        title: '标签',
        dataIndex: 'classify',
        render: (text, record, index) => (
          <span>
            <Tag color="blue" key={record.classify}>
              {record.classify}
            </Tag>
            <Tag color="blue" key={record.tags}>
              {record.tags}
            </Tag>
          </span>
        )
      },
      {
        title: '操作',
        dataIndex: 'do',
        render: (text, record, index) => {
          return (
            <div>
              <Button
                size="small"
                onClick={this.bookDetail.bind(this, record.bookId)}
                style={{ float: 'left' }}
              >
                详情
              </Button>
              {this.state.booksCheck === 'pending' ? (
                <div style={{ width: '97px', float: 'left' }}>
                  <Button
                    size="small"
                    type="primary"
                    onClick={this.bookAllow.bind(this, record.bookId)}
                  >
                    通过
                  </Button>
                  <Button
                    size="small"
                    type="danger"
                    onClick={this.bookForbid.bind(this, record.bookId)}
                  >
                    冻结
                  </Button>
                </div>
              ) : this.state.booksCheck === 'forbid' ? (
                <Button
                  type="danger"
                  size="small"
                  onClick={this.bookAllow.bind(this, record.bookId)}
                >
                  已冻结
                </Button>
              ) : (
                <Button
                  type="primary"
                  size="small"
                  onClick={this.bookForbid.bind(this, record.bookId)}
                >
                  已通过
                </Button>
              )}
            </div>
          )
        }
      }
    ]
  }
  //管理书籍
  adminBooksHandle = params => {
    const userId = JSON.parse(window.sessionStorage.getItem('usermessage'))
      .userId
    adminbooks({
      userId,
      bookId: params.bookId,
      nowStatus: this.state.booksCheck,
      status: params.status
    }).then(resp => {
      console.log(resp)
      if (resp.data.data.status === 1) {
        resp.data.data.data.map(item => {
          return (item['key'] = item.bookId)
        })
        this.setState({
          data: resp.data.data.data,
          selectedRowKeys: []
        })
      } else {
      }
    })
  }
  //冻结书籍
  bookForbid = bookId => {
    this.adminBooksHandle({ bookId, status: 'forbid' })
  }
  //通过书籍
  bookAllow = bookId => {
    this.adminBooksHandle({ bookId, status: 'allow' })
  }

  //查看书籍详情
  bookDetail = detail => {
    this.bookDetailModal.current.showModal(detail)
  }

  //勾选书籍
  onSelectChange = selectedRowKeys => {
    console.log('selectedRowKeys changed: ', selectedRowKeys)
    this.setState({ selectedRowKeys })
  }

  //页码(currentPage)改变
  onPageChange = currentPage => {
    this.setState(
      {
        offset: (currentPage - 1) * this.state.perpage
      },
      () => {
        this.state.booksCheck === 'pending'
          ? this.getPendingBooksList()
          : this.state.booksCheck === 'forbid'
          ? this.ForbidBooksList()
          : this.AllowBooksList()
      }
    )
  }

  //每页显示数量(perpage)改变
  onPageShowSizeChange = (current, perpage) => {
    this.setState(
      {
        offset: 0,
        perpage
      },
      () => {
        this.state.booksCheck === 'pending'
          ? this.getPendingBooksList()
          : this.state.booksCheck === 'forbid'
          ? this.ForbidBooksList()
          : this.AllowBooksList()
      }
    )
  }

  //获取书籍列表
  getData = status => {
    getAdminBooksList(status).then(resp => {
      console.log(resp)
      if (resp.data.data.status === 1) {
        //将每条数据加上key
        resp.data.data.data.map(item => {
          return (item['key'] = item.bookId)
        })
        this.setState({
          data: resp.data.data.data,
          isLoading: false,
          booksCheck: status.status
        })
      }
    })
  }
  //通过关键字搜索
  getBooksListByKeyWords = value => {
    this.getData({ keyWords: value, status: this.state.booksCheck })
  }
  //请求待审核书籍列表
  getPendingBooksList = () => {
    this.getData({ status: 'pending' })
  }
  //获取被冻结书籍列表
  ForbidBooksList = () => {
    this.getData({ status: 'forbid' })
  }
  //获取已审核书籍列表
  AllowBooksList = () => {
    this.getData({ status: 'allow' })
  }

  componentDidMount() {
    this.getPendingBooksList()
  }
  render() {
    const { selectedRowKeys } = this.state
    console.log(selectedRowKeys)
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
      hideDefaultSelections: true
    }
    return (
      <Fragment>
        <Card title="书籍列表" bordered={false} style={{ width: '100%' }}>
          <Button
            style={{ position: 'absolute', top: 8, right: 520 }}
            onClick={this.getPendingBooksList}
          >
            待审核书籍
          </Button>
          <Button
            style={{ position: 'absolute', top: 8, right: 400 }}
            type="danger"
            onClick={this.ForbidBooksList}
          >
            已冻结书籍
          </Button>
          <Button
            style={{ position: 'absolute', top: 8, right: 280 }}
            type="primary"
            onClick={this.AllowBooksList}
          >
            已审核书籍
          </Button>
          <Search
            placeholder="请输入"
            onSearch={value => this.getBooksListByKeyWords(value)}
            style={{ width: 200, position: 'absolute', top: 8, right: 64 }}
          />

          <Spin indicator={antIcon} spinning={this.state.isLoading}>
            <Table
              rowSelection={rowSelection}
              columns={this.columns}
              dataSource={this.state.data}
              pagination={{
                current: this.state.offset / this.state.perpage + 1,
                total: this.state.total,
                pageSize: this.state.perpage,
                hideOnSinglePage: true,
                showSizeChanger: true,
                pageSizeOptions: ['5', '10', '20'],
                showQuickJumper: true,
                onChange: this.onPageChange,
                onShowSizeChange: this.onPageShowSizeChange
              }}
            />
            {/* <Button
              className="collect-selected"
              //   onClick={this.collectBook.bind(this, this.state.selectedRowKeys)}
            > */}

            {/* </Button> */}
            {this.state.booksCheck === 'pending' ? (
              <ButtonGroup
                style={{ position: 'absolute', bottom: -40, left: 40 }}
              >
                <Button
                  type="danger"
                  size="small"
                  onClick={this.bookForbid.bind(
                    this,
                    this.state.selectedRowKeys
                  )}
                >
                  冻结选中书籍
                </Button>
                <Button
                  type="primary"
                  size="small"
                  onClick={this.bookAllow.bind(
                    this,
                    this.state.selectedRowKeys
                  )}
                >
                  通过选中书籍
                </Button>
              </ButtonGroup>
            ) : this.state.booksCheck === 'forbid' ? (
              <Button
                style={{ position: 'absolute', bottom: -40, left: 40 }}
                type="primary"
                size="small"
                onClick={this.bookAllow.bind(this, this.state.selectedRowKeys)}
              >
                取消冻结并通过选中书籍
              </Button>
            ) : (
              <Button
                style={{ position: 'absolute', bottom: -40, left: 40 }}
                type="danger"
                size="small"
                className="collect-selected"
                onClick={this.bookForbid.bind(this, this.state.selectedRowKeys)}
              >
                取消通过并冻结选中书籍
              </Button>
            )}
          </Spin>
        </Card>
        <BookDetail ref={this.bookDetailModal} collectBook={this.collectBook} />
      </Fragment>
    )
  }
}
